import React from 'react'

class Todolist extends React.Component {
    constructor() {
        super()

        this.state = {
            todo: '',
            datalist: [
                {
                    id: 1,
                    todo: '赚他一个亿津巴布韦币',
                    date: '2022/7/20',
                    done: true,
                },
                {
                    id: 2,
                    todo: '迎娶白富美，达到人生巅峰',
                    date: '2022/7/21',
                    done: false,
                },
                {
                    id: 3,
                    todo: '出任CEO，达到疯癫状态',
                    date: '2022/7/22',
                    done: false,
                },
            ],
            show:'all'
        }

        // 改变this指向
        this.addItem = this.addItem.bind(this); // 得到一个改变了this指向的函数
        this.changeTodo = this.changeTodo.bind(this); // 得到一个改变了this指向的函数
    }

    // 添加
    // 自定义函数，this为undefined，所以需要改变this指向组件实例
    addItem() {
        const newItem = {
            id: Math.ceil(Math.random() * 1000),
            // todo:document.querySelector('#input').value,
            todo: this.state.todo,
            date: new Date().toLocaleDateString(),
            done: false
        }

        this.setState({
            datalist: [newItem, ...this.state.datalist]
        })

        // 清空并自动获得焦点
        this.setState({
            todo: ''
        })

        // document.querySelector('#input').focus()
        this.input.focus();
    }
    // 删除
    // 使用箭头函数实现正确this指向，但需要浏览器的支持
    removeItem = (id) => {
        return () => {
            console.log('点击后执行', id)

            this.setState({
                datalist: this.state.datalist.filter(item => item.id != id)
            })
        }
    }

    // 完成
    completeItem = (id) => {
        const { datalist } = this.state;

        // 找到相应的数据，并修改done属性
        const newDatalist = datalist.map(item => {
            if (item.id === id) {
                item.done = !item.done;
            }
            return item;
        })
        this.setState({
            datalist: newDatalist
        })
    }

    // 修改输入框内容：修改为用户输入的内容
    changeTodo(e) {
        this.setState({
            todo: e.target.value
        })
    }

    filter = (show)=>{
        this.setState({
            show:show
        })
    }

    render() {
        let { datalist, todo,show } = this.state;

        if(show === 'all'){
            
        }else if(show==='done'){
            datalist = datalist.filter(item=>item.done)
        }else if(show==='undone'){
            datalist = datalist.filter(item=>!item.done)
        }
        return (
            <div>
                Todolist
                <div className="input-group mb-3">
                    <input type="text" value={todo} onChange={this.changeTodo} className="form-control" id="input" ref={(el) => this.input = el} />
                    <button className="btn btn-success" onClick={this.addItem}>添加</button>
                </div>
                <table className="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">待办事项</th>
                            <th scope="col">添加时间</th>
                            <th scope="col">是否完成</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {/* 列表渲染：map */}
                        {datalist.map((item, idx) => {
                            return (
                                <tr key={item.id} className={item.done ? 'table-success' : ''}>
                                    <th scope="row">{idx + 1}</th>
                                    <td>{item.todo}</td>
                                    <td>{item.date}</td>
                                    <td>{item.done ? '是' : '否'}</td>
                                    <td>
                                        <i className="bi bi-check-square me-3" onClick={this.completeItem.bind(null, item.id)}></i>
                                        {/* <i className="bi bi-x-square" onClick={this.removeItem.bind(null,item.id)}></i> */}
                                        <i className="bi bi-x-square" onClick={this.removeItem(item.id)}></i>
                                    </td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
                <div className='row p-3'>
                    <div className="col-2">
                        总数：{datalist.length}
                    </div>
                    <div className="col-10">
                        <button className={'btn btn-sm me-3 '+(show==='all' ? 'btn-primary':'btn-outline-primary')} onClick={this.filter.bind(null,'all')}>All</button>
                        <button className={'btn btn-sm me-3 '+(show==='done' ? 'btn-primary':'btn-outline-primary')} onClick={this.filter.bind(null,'done')}>done</button>
                        <button  className={'btn btn-sm me-3 '+(show==='undone' ? 'btn-primary':'btn-outline-primary')} onClick={this.filter.bind(null,'undone')}>undone</button>
                    </div>
                </div>
            </div>
        )
    }
}
export default Todolist